<template>
  <el-cascader
    v-model="selValue"
    :options="area_option"
    :props="props"
    separator=""
    :placeholder="isShowArea ? '请选择省市区' : '请选择城市'"
    :check-strictly="true"
    :show-all-levels="false"
    @change="handleChange"
  />
</template>

<script>
import { regionList } from '@/api'
export default {
  props: {
    isShowArea: {
      type: Boolean,
      default: true
    },
    cityCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      area_option: [],
      isShow: false,
      props: {
        label: 'name',
        value: 'code',
        children: 'list'
      },
      selValue: this.cityCode
    }
  },
  created() {
    this.getRegionList()
  },
  methods: {
    handleChange(e) {
      if (e && e.length > 0) {
        this.$emit('change', e)
      }
      this.isShow = false
    },
    // 清除选中
    handleClear() {
      this.$emit('change', [])
    },
    getRegionList() {
      regionList({ param: {}})
        .then((res) => {
          const addrList = res.recordList
          for (const addr of addrList) {
            // addr.code = addr.code + '-' + addr.name
            const cityaddr = addr.list
            if (cityaddr && cityaddr.length) {
              for (const city of cityaddr) {
                // city.code = city.code + '-' + city.name
                const arealist = city.list
                if (arealist && arealist.length) {
                  for (const area of arealist) {
                    // area.code = area.code + '-' + area.name
                  }
                }
                if (!this.isShowArea) {
                  city.list = null
                }
              }
            }
          }
          this.area_option = addrList
        })
        .catch((er) => {
          console.log(er)
        })
    }
  }
}
</script>
<style lang="scss">
.my-popper {
  padding: 0 !important;
}
</style>
<style lang="scss" scoped>
// 外面文本框
.select-label {
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 14px;
  cursor: pointer;
  color: #606266;
  justify-content: space-between;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;

  &:focus {
    outline: none;
    border-color: #3784dc;
  }

  // &:hover {
  //   background-color: #f5f5f5;
  // }

  .left {
    display: flex;
  }
  .label {
    width: 100%;
    min-width: 20px;
    color: #333333;
    margin: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .icon {
    display: flex;
    width: 14px;
    height: 100%;
    align-items: center;
    color: #c0c4cc;
  }
}
.select-label-bg {
  background-color: #f5f5f5;
}
// 选择区
.select-option {
  font-size: 14px;

  // 信息区
  .option-top {
    display: flex;
    color: #999999;
    padding: 6px 12px;
    height: 30px;
    font-size: 12px;
    align-items: center;

    .top-line {
      height: 14px;
      border-left: 1px solid #cccccc;
      margin: 0 6px;
    }
    .top-clear {
      color: #00cc88;
      cursor: pointer;
    }
  }
}

@keyframes dialog-fade {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
</style>

